/* pages/site/index.wxss */
@import "../../commin/commin.less";

page {
    width: @percent;
    height: @percent;
    position: relative;
}
.content_list {
	height: 800rpx;
	overflow-x: hidden;
	.scroll_view_style{
		height: 100%;
	}
}
.content_list_Region {
	height: 400rpx;
	overflow-x: hidden;
	.scroll_view_style{
		height: 100%;
	}
}

.search {
    overflow: hidden;
    position: absolute;
    top: 0;
	width: 100%;
	z-index: 99;
	background-color: @white-color;
	align-items: center;
	.paddings(17rpx, 32rpx, 24rpx, 26rpx);
	border-bottom: 1rpx solid @text-color5;
	box-sizing: border-box;

	.search_box {
	    display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;

		.location {
		    display: flex;
		    align-items: center;
			width: 110rpx;

		    .city_name {
		        font-size: 26rpx;
		        color: @text-color2;
		        width: 100rpx;
		        overflow: hidden; //溢出隐藏
		        white-space: nowrap; //禁止换行
		        text-overflow: ellipsis; //...
		    }
		    .icon {
		        .kuangao(25rpx, 25rpx);
				margin-left: 8rpx;
		    }
		}
		.search_input {
			flex: 1;

			.weui-search-bar {
				display: flex;
				// padding: 0 24rpx;
                padding-right: 24rpx;
			}

			.weui-icon-search {
				margin-right: 8px;
				font-size: inherit;
			}

			.weui-icon-search_in-box {
				position: absolute;
				left: 10rpx;
				top: 12rpx;
			}

			.weui-search-bar__text {
				display: inline-block;
				font-size: 14px;
				vertical-align: middle;
			}

			.weui-search-bar__form {
				flex: auto;
				background: #FFFFFF;
				border: 1rpx solid rgba(231, 242, 250, 0.5);
				box-shadow: 1rpx 4rpx 20rpx 0rpx rgba(139, 153, 167, 0.2);
				opacity: 0.9;
				border-radius: 35rpx;
				.paddings(10rpx, 10rpx, 10rpx, 33rpx);
			}

			.weui-search-bar__box {
				position: relative;
				padding-left: 30px;
				padding-right: 30px;
				width: 100%;
				box-sizing: border-box;
				z-index: 1;
			}

			.weui-search-bar__input {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
				width: 100%;
			}

			.weui-icon-clear {
				position: absolute;
				top: 0;
				right: 0;
				padding: 7px 8px;
				font-size: 0;
			}

			.weui-search-bar__label {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 2;
				border-radius: 3rpx;
				text-align: center;
				color: #9B9B9B;
				background: #FFFFFF;
				line-height: 28px;
			}

			.weui-search-bar__cancel-btn {
				margin-left: 10px;
				line-height: 28px;
				color: #09BB07;
				white-space: nowrap;
				font-size: 30rpx;
			}
		}
		.notice_box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50rpx;

			.img {
				width: 44rpx;
				height: 44rpx;
			}
			.tipInfo {
			    .kuangao(14rpx, 14rpx);
			    .position(absolute, 20rpx, 34rpx, 0, auto);
			    .borderradius(7rpx, 7rpx, 7rpx, 7rpx);
			    background: @orange;
			}
		}
	}

    .screen {
        display: flex;
		justify-content: space-between;
        margin-top: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #303133;

        .region {
            display: flex;
            align-items: center;
            margin-left: 20rpx;
            color: @text-color1;

            .regionImg {
                .kuangao(20rpx, 20rpx);
                .margins(0, 80rpx, 0, 7rpx);
            }
        }

        .preference {
            display: flex;
            align-items: center;

			text {
				font-size: 28rpx;
			}
            .preferenceImg {
                .kuangao(25rpx, 25rpx);
                margin-left: 10rpx;
            }
        }

        .siteList {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150rpx;
			height: 56rpx;
			background: #F5F7FA;
			border: 1px solid #DCDFE6;
			border-radius: 28rpx;
			position: absolute;
			margin-top: -12rpx;
			right: 32rpx;

            .siteListImg {
                .kuangao(24rpx, 22rpx);
                margin-right: 10rpx;
            }
        }
    }
}

.search .tool {
    width: 750rpx;
    height: 50px;
    display: flex;
    align-items: center;
}

.search .tool .area {
    height: 40px;
    width: 150rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search .tool .area text {
    font-size: 28rpx;
    color: #092E48;
    font-weight: 500;
    margin: 0 5rpx 0 0;
}

.search .tool .area image {
    width: 24rpx;
    height: 6px;
}

.search .tool .tsearch {
    width: 490rpx;
    height: 35px;
    border-radius: 35rpx;
    background: #F5F6FA;
    display: flex;
    align-items: center;
}

.search .tool .tsearch image {
    width: 31rpx;
    height: 15px;
    margin: 0 10rpx;
}

.search .tool .tsearch text {
    color: #B3B5BE;
    font-size: 28rpx;
}

.search .tool .news {
    width: 100rpx;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search .tool .news text {
    font-size: 30rpx;
    color: #101734;
}

.search .selectDis {
    width: 690rpx;
    margin: 0 auto;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search .selectDis .radio_distance {
    padding: 0 25rpx;
    height: 25px;
    border: 1px solid #888888;
    border-radius: 30rpx;
    font-size: 13px;
    color: #888888;
    line-height: 25px;
    text-align: center;
}

.search .selectDis .distance_checked {
    border: 1px solid #01CA7E;
    color: #01CA7E;
}

.imageArr {
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    top: 170px;
    right: 14rpx;
    z-index: 100;
}

.imageArr view {
    width: 80rpx;
    height: 80rpx;
}

.imageArr view image {
    width: 80rpx;
    height: 80rpx;
}

.mask {
    width: @percent;
    height: @percent;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    overflow: hidden;
}

.message {
    position: fixed;
	top: 260rpx;
	left: 24rpx;
	right: 24rpx;
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    border: 2rpx solid #FFFFFF;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 80rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: @text-color1;

    .img {
        width: 51rpx;
        height: 38rpx;
        margin-right: 27rpx;
    }

    .message-swiper {
        width: 638rpx;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color1;

        .text {
            -webkit-box-orient: vertical; // 避免压缩后删除此行
            -webkit-line-clamp: 1; // 显示省略号行数
            display: -webkit-box;
            overflow: hidden;
            /*隐藏*/
            white-space: nowrap;
            /*不换行*/
            text-overflow: ellipsis;
            /* 超出部分省略号 */
        }
    }
}

.detailsPopup {
    width: 640rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    position: fixed;
    bottom: -100vh;
    left: 25rpx;
    z-index: 120;
}

.detailsPopup .close {
    height: 30rpx;
}

.detailsPopup .close image {
    display: block;
    width: 22rpx;
    height: 12rpx;
    margin: 0 auto;
}

.detailsPopup .d_top {
    display: flex;
    justify-content: space-between;
}

.detailsPopup .d_top .site_img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;
}

.detailsPopup .d_top .site_img image {
    width: 160rpx;
    height: 160rpx;
}

.detailsPopup .d_top .dt_right {
    width: 460rpx;
}

.detailsPopup .d_top .dt_right .r_top {
    min-height: 50rpx;
    display: flex;
    justify-content: space-between;
}

.detailsPopup .d_top .dt_right .r_top .site_name {
    font-size: 30rpx;
    color: #101734;
}

.detailsPopup .d_top .dt_right .r_top .score {
    height: 30rpx;
    display: flex;
    align-items: center;
}

.detailsPopup .d_top .dt_right .r_top .score image {
    width: 25rpx;
    height: 25rpx;
}

.detailsPopup .d_top .dt_right .r_main {
    overflow: hidden;
    width: @percent;
    margin-top: 10rpx;
}

.detailsPopup .d_top .dt_right .r_main .r_mian_view {
    width: 35%;
    display: flex;
    justify-content: flex-start;
    float: left;
    margin-bottom: 10rpx;
}

.detailsPopup .d_top .dt_right .r_main .r_mian_view view {
    width: 37rpx;
    height: 28rpx;
    line-height: 28rpx;
    text-align: center;
    border-radius: 15rpx;
    font-size: 20rpx;
}

.detailsPopup .d_top .dt_right .r_main .r_mian_view .bigfast {
    color: #FF7073;
    border: 2rpx solid #FF7073;
}

.detailsPopup .d_top .dt_right .r_main .r_mian_view .fast {
    color: #01CA7E;
    border: 2rpx solid #01CA7E;
}

.detailsPopup .d_top .dt_right .r_main .r_mian_view .slow {
    color: #FF8F5A;
    border: 2rpx solid #FF8F5A;
}

.detailsPopup .d_top .dt_right .r_main .r_mian_view text {
    margin: 0 10rpx;
    font-size: 24rpx;
    color: #707485;
}

.detailsPopup .d_top .dt_right .address {
    height: 50rpx;
    display: flex;
    align-items: center;
}

.detailsPopup .d_top .dt_right .address image {
    width: 30rpx;
    height: 30rpx;
}

.detailsPopup .d_top .dt_right .address text {
    display: block;
    width: 420rpx;
    height: 40rpx;
    line-height: 40rpx;
    overflow: hidden;
    font-size: 26rpx;
    color: #707485;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.detailsPopup .charge_view {
    margin: 20rpx 0 0 0;
    display: flex;
}

.detailsPopup .charge_view .c_left {
    width: 160rpx;
}

.detailsPopup .charge_view .c_left text {
    color: #101734;
    font-size: 30rpx;
    font-weight: 500;
}

.detailsPopup .charge_view .c_right {
    display: flex;
}

.detailsPopup .charge_view .c_right .money_view {
    display: flex;
}

.detailsPopup .charge_view .c_right .money_view .money {
    font-size: 30rpx;
    color: #FF7073;
}

.detailsPopup .charge_view .c_right .discount {
    display: flex;
    align-items: center;
    margin: 0 0 0 20rpx;
}

.detailsPopup .charge_view .c_right .discount image {
    width: 14rpx;
    height: 20rpx;
    margin: 0 4rpx 0 0;
}

.detailsPopup .charge_view .c_right .discount text {
    font-size: 24rpx;
    color: #01CA7E;
}

.detailsPopup .config {
    margin: 14rpx 0 0 0;
    display: flex;
}

.detailsPopup .config .cg_left {
    width: 160rpx;
}

.detailsPopup .config .cg_left text {
    color: #101734;
    font-size: 30rpx;
    font-weight: 500;
}

.detailsPopup .config .cg_right {
    display: flex;
    flex-wrap: wrap;
}

.detailsPopup .config .cg_right view {
    display: flex;
    align-items: center;
}

.detailsPopup .config .cg_right view image {
    width: 22rpx;
    height: 22rpx;
    margin: 0 10rpx 0 0;
}

.detailsPopup .config .cg_right view text {
    font-size: 26rpx;
    color: #9699A6;
}

.detailsPopup .config .cg_right .openTime {
    margin: 0 16rpx 0 0;
}

.detailsPopup .d_bottom {
    height: 80rpx;
    margin: 40rpx 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.detailsPopup .d_bottom view {
    width: 300rpx;
    height: 80rpx;
    border-radius: 10rpx;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
}

.detailsPopup .d_bottom view text {
    color: #FFFFFF;
}

.detailsPopup .d_bottom view .t1 {
    font-size: 30rpx;
}

.detailsPopup .d_bottom view .t2 {
    font-size: 22rpx;
}

.detailsPopup .d_bottom .yuyue {
    background: linear-gradient(315deg, #FF8A5B 0%, #FE914F @percent);
}

.detailsPopup .d_bottom .noYuyue {
    background: linear-gradient(315deg, #adadad 0%, #bbbbbb @percent);
}

.detailsPopup .d_bottom .navigation {
    width: 480rpx;
    background: linear-gradient(90deg, #03DC8A 0%, #00C078 @percent);
}


.map_container {
    position: absolute;
	top: 230rpx;
	bottom: 120rpx;
    left: 0;
    right: 0;
    z-index: 1;
}

.map {
   height: 100%;
   width: 100%
}

.map_text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    height: 80px;
    background: #fff;
    padding: 0 15px;
}

.h1 {
    margin: 15px 0;
    font-size: 15px;
}

.stationCharging {
    position: absolute;
    bottom: 184rpx;
    right: 0;
    .kuangao(148rpx, 148rpx);

    image {
        .kuangao(100%, 100%);
    }

    .txt {
        .fontsize(20rpx);
        font-family: PingFang SC;
        font-weight: 400;
        color: #707485;
    }
}

.chargingType {
    position: absolute;
    top: 170px;
    left: 24rpx;
    background: @white-color;
    box-shadow: 0rpx 6rpx 28rpx 0rpx rgba(196, 203, 210, 0.48);
    opacity: 0.9;
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
	width: 186rpx;

    .tagging0 {
        .paddings(32rpx, 20rpx, 10rpx, 20rpx);
        display: flex;
        align-items: center;
        .fontsize(24rpx);
        font-family: PingFang SC;
        font-weight: 400;
        color: #5C5F66;
        border-bottom: 1rpx solid #DCDFE6;

        .img {
            .kuangao(27rpx, 28rpx);
            margin-top: 6rpx;
        }

        .txt0 {
			flex: 1;
            .margins(0, 15rpx, 0, 12rpx);
        }
    }
	
	.chargingTypeBox {
		padding: 14rpx 20rpx;
		
		.chargingTypeItem {
			display: flex;
			align-items: center;
			margin-bottom: 14rpx;

			.img {
				.kuangao(27rpx, 28rpx);
				margin-top: 6rpx;
			}

			.txt {
				flex: 1;
				.fontsize(24rpx);
				font-family: PingFang SC;
				font-weight: 400;
				color: #5C5F66;
				.margins(0, 15rpx, 0, 12rpx);
			}
		}
	}

    .checktype {
        .kuangao(19rpx, 14rpx);
    }
}

.pop_title {
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #1A1A1A;
	text-align: center;
	.paddings(17rpx, 32rpx, 24rpx, 26rpx);
	border-bottom: 1rpx solid @text-color5;
}

.pop_top {
    .margins(0rpx, 0, 160rpx, 0);

    .type_btn {
        display: flex;
        justify-content: center;
        position: fixed;
        // bottom: 20%;
        width: @percent;
        background: #fff;
        padding: 49rpx 0;
        // height: 120rpx;
        align-items: center;

        .btn1 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            .borders(1rpx, @text-color4);
            text-align: center;
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }

        .btn2 {
            .kuangao(270rpx, 88rpx);  
            .lineheight(88rpx);
            text-align: center;
            margin-left: 50rpx;
            // background: linear-gradient(105deg, #2B99FF, var(--textColor));
            // box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }    
}

.pop_top1 {
    .margins(260rpx, 0, 0rpx, 0);

    .area {
        display: flex;
        flex-wrap: wrap;
        .paddings(16rpx, 24rpx, 0rpx, 26rpx);
        margin-bottom: 120rpx;

        .areaItem {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            text-align: center;
            background: @text-color6;
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
            .margins(24rpx, 14rpx, 0, 0);
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
        }

        .areaItem_sel {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            text-align: center;
            background: rgba(20, 135, 250, 0.06);
            .borders(1rpx, @blue);
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @blue;
            .margins(24rpx, 14rpx, 0, 0);
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
        }
    }

    .type_btn {
        display: flex;
        justify-content: center;
        position: fixed;
        // bottom: 20%;
        width: @percent;
        background: #fff;
        // height: 120rpx;
        padding: 49rpx 0;
        align-items: center;

        .btn1 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            .borders(1rpx, @text-color4);
            text-align: center;
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }

        .btn2 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            text-align: center;
            margin-left: 50rpx;
            // background: linear-gradient(105deg, #2B99FF, var(--textColor));
            // box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }
}

.type {
    .margins(39rpx, 0, 0, 35rpx);

    .type_title {
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @text-color2;
    }

    .type_list {
        display: flex;
        flex-wrap: wrap;

        .type_itme {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            .margins(24rpx, 16rpx, 0, 0);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-align: center;
            background: @text-color6;
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
        }

        .type_itme_sel {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            .margins(24rpx, 16rpx, 0, 0);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-align: center;
            background: rgba(20, 135, 250, 0.06);
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: bold;
            .borders(1rpx, @blue);
            color: @blue;
        }
    }
}

.p-category {
    display: flex;
    flex-direction: column;

    &-header {
        background: #fff;

        &-wrap {
            display: flex;
            align-items: center;
            padding: 20rpx 0 32rpx;
            height: 104rpx;
        }

        .icon {
            width: 48rpx;
            height: 48rpx;
            display: block;
            padding: 0 16rpx 0 32rpx;
        }

        .title {
            font-size: 40rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 56rpx;
        }
    }

    &-container {
        flex: 1;
        display: flex;
        overflow: hidden;
        // height: calc(80% - 106rpx);
        ;
        background-color: #F5F7FA;
    }

    &-left {
        .kuan(220rpx);
    }

    &-menu {
        height: 80%;
        z-index: 1;

        &-item {
            .paddings(23rpx, 0, 23rpx, 0);
            text-align: center;
            background: #F5F7FA;
            transition: all 0.3s linear;
            position: relative;
            border-bottom: 2rpx solid @white-color;

            &-label1 {
                .fontsize(26rpx);
                .margins(23rpx, 0, 19rpx, 0);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }

            &-label2 {
                .fontsize(26rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color4;
            }

            &-line {
                width: 8rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
            }

            &.active {
                background: @white-color;
                .borderradius(16rpx, 0rpx, 0rpx, 0rpx);

                .p-category-menu-item-label {
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @text-color3;
                }
            }
        }
    }

    &-right {
        .kuan(calc(@percent - 220rpx));
        background: @white-color;
        .borderradius(0rpx, 16rpx, 16rpx, 0rpx);

        &-scroll {
            box-sizing: border-box;
        }
    }

    &-store {
        display: flex;
        align-items: center;
        width: @percent;
        padding: 0 0 40rpx 32rpx;

        &-label {
            font-size: 26rpx;
            font-weight: bold;
            color: #7b8082;
            line-height: 44rpx;
            padding-right: 40rpx;
            white-space: nowrap;

            &.on {
                font-size: 30rpx;
                color: #121a1e;
            }
        }
    }

    &-first {
        .paddings(0, 32rpx, 0rpx, 24rpx);

        &-label {
            font-size: 30rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 44rpx;
            padding-bottom: 24rpx;
        }
    }

    &-second {
        .paddings(30rpx, 0rpx, 24rpx, 0px);
        .fontsize(28rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color3;
    }
}

.detail_popup {
    width: 702rpx !important;
    margin: 0 24rpx 26rpx 24rpx;
    background: transparent;
    border: 2rpx solid #FFFFFF;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
}

.order1 {
    // background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    // border: 2rpx solid #FFFFFF;
    // box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    // margin: 16rpx 26rpx;
    // border-radius: 16rpx;
    .paddings(40rpx, 32rpx, 27rpx, 30rpx);

    .top {
        display: flex;
        justify-content: space-between;
        padding-bottom: 24rpx;

        // border-bottom: 1rpx solid #DCDFE6;
        .left {
            display: flex;
            align-items: center;
            color: #1A1A1A;
            font-size: 30rpx;
            font-weight: bold;
        }

        .top_name {
            width: 390rpx;
            z-index: 2;
            -webkit-box-orient: vertical; // 避免压缩后删除此行
            -webkit-line-clamp: 1; // 显示省略号行数
            display: -webkit-box;
            overflow: hidden;
            /*隐藏*/
            white-space: nowrap;
            /*不换行*/
            text-overflow: ellipsis;
            /* 超出部分省略号 */
        }

        .right {
            font-size: 24rpx;
            text-align: right;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 40rpx;
            color: @blue;
            z-index: 2;
            width: 300rpx;

            image {
                width: 25rpx;
                height: 24rpx;
                margin-left: 10rpx;
            }

            &.ok {
                color: @blue;
            }
        }
    }

    .item {
        display: flex;
        width: 100%;

        .left {
            margin-right: 30rpx;

            .overcharge {
                .kuangao(103rpx, 62rpx);
                position: absolute;
                margin-top: -28rpx;
                margin-left: -8rpx;
            }

            .icon {
                width: 161rpx;
                height: 159rpx;
                background: #FFFFFF;
                border: 2rpx solid rgba(255, 255, 255, 0.3);
                box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(218, 218, 220, 0.3);
                border-radius: 8rpx;
            }

            .serveTime1 {
                .kuan(161rpx);
                text-align: center;
                .paddings(7rpx, 0rpx, 7rpx, 0rpx);
                background: #595C69;
                opacity: 0.6;
                .borderradius(0rpx, 0rpx, 8rpx, 8rpx);
                position: absolute;
                margin-top: -46rpx;
                margin-left: 1rpx;
            }

            .serveTime2 {
                .kuan(161rpx);
                text-align: center;
                .paddings(7rpx, 0rpx, 7rpx, 0rpx);
                background: #595C69;
                opacity: 0.6;
                .borderradius(0rpx, 0rpx, 8rpx, 8rpx);
                position: absolute;
                margin-top: -76rpx;
                margin-left: 1rpx;
            }

            .showTime {
                .fontsize(20rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FEFEFE;
            }

        }

        .content {
            flex: 1;
            // display: flex;
            // flex-direction: column;
            // justify-content: space-between;
            position: relative;
            padding: 8rpx 0 14rpx;

            .type1 {
                .exceed {
                    width: 400rpx;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    align-items: center;

                    image {
                        width: 51rpx;
                        height: 40rpx;
                        margin-right: 14rpx;
                    }

                    .blue {
                        color: @blue;
                    }

                    .orange {
                        color: @orange;
                    }

                    .green {
                        color: @green;
                    }

                    .text-color4 {
                        color: @text-color4;
                        margin-right: 44rpx;
                    }
                }

                .collection {
                    width: 32rpx;
                    height: 30rpx;
                    position: absolute;
                    right: 0rpx;
                    top: 72rpx;
                }
            }

            .price {
                display: flex;
                align-items: baseline;
            }

            .price-info {
                font-size: 40rpx;
                font-family: DIN Alternate;
                font-weight: bold;
                color: @orange;
                margin-top: 20rpx;

                .sp {
                    font-size: 26rpx;
                    font-family: PingFang-SC-Medium;
                    font-weight: 500;
                }

                .originalPrice {
                    margin-left: 12rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC;
                    font-weight: 400;
                    text-decoration: line-through;
                    color: @text-color4;
                }
            }

            .time {
                font-size: 20rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #C0C4CC;
                margin: 16rpx 0 0rpx;
            }

            .hargingType {
                font-size: 22rpx;
                width: 77rpx;
                height: 40rpx;
                color: #7b8082;
                position: absolute;
                // top: 48rpx;
                right: 15rpx;
            }
        }
    }

    .tagList {
        display: flex;
        flex-wrap: wrap;

        text {
            padding-bottom: 32rpx;
        }

        .tag1 {
            background: rgba(20, 135, 250, 0.06);
            border-radius: 20rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: @blue;
            padding: 9rpx 18rpx;
        }

        .tag2 {
            background: rgba(96, 98, 102, 0.06);
            border-radius: 20rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: @text-color4;
            padding: 9rpx 18rpx;
            margin-right: 8rpx;
        }
    }

    .bottom {
        padding-top: 25rpx;
        border-top: 1rpx solid #DCDFE6;
        .show {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color4;
            image {
                width: 26rpx;
                height: 26rpx;
                margin-right: 15rpx;
            }
            text{
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                display: -webkit-box;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}

.order {
	// background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
	// border: 2rpx solid #FFFFFF;
	// box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
	// margin: 16rpx 26rpx;
	// border-radius: 16rpx;
	// padding: 39rpx 32rpx 27rpx 31rpx;
	// position: relative;

	.top {
		display: flex;
		justify-content: space-between;

		// border-bottom: 1rpx solid #DCDFE6;
		.left {
			display: flex;
			align-items: center;
			color: #1A1A1A;
			font-size: 30rpx;
			font-weight: bold;
		}

		.top_name {
			// width: 470rpx;
			flex: 1;
			color: #1A1A1A;
			font-size: 30rpx;
			font-weight: bold;
			overflow: hidden;
			/*隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
			/* 超出部分省略号 */
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
			color: @blue;
			z-index: 2;

			image {
				width: 25rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}

			&.ok {
				color: @blue;
			}
		}
	}

	.tagList {
		display: flex;
		flex-wrap: wrap;
		margin-top: 24rpx;
		height: 50rpx;
		overflow: hidden;

		.tag {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			padding: 6rpx 16rpx;

			&.tag1 {
				border: 1px solid @blue;
				border-radius: 8rpx;
				color: @blue;
				margin: 0 4rpx;
			}

			&.tag2 {
				color: #909399;
				position: relative;

				&::after {
					position: absolute;
					right: 0;
					top: 12rpx;
					content: '';
					height: 22rpx;
					width: 1px;
					background: #909399;
				}
				&:last-child {
					
					&::after {
						width: 0;
					}
				}
			}
		}
	}
	.price-info {
		font-size: 40rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: @orange;
		margin-top: 24rpx;

		.active-icon {
			width: 24rpx;
			height: 28rpx;
			margin-right: 12rpx;
		}
		.price {
			display: flex;
			align-items: baseline;
		}
		.sp {
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
		}

		.originalPrice {
			margin-left: 12rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			text-decoration: line-through;
			color: @text-color4;
		}
	}
	.exceed{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
		margin-top: 24rpx;

		.exceed-item {
			display: flex;
			align-items: center;

			image{
				width: 44rpx;
				height: 34rpx;
				margin-right: 11rpx;
			}
			.blue{
				color: @blue;
			}
			.orange{
				color: @orange;
			}
			.green{
				color:@green;
			}
			.text-color4{
				color: #909399;
				font-size: 24rpx;
			}
		}
	}

	.tip-icon {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		width: 107rpx;
		height: 111rpx;
	}
}

.popup-box {
    .kuangao(590rpx, 400rpx);
    .flexs();
    background-color: @white-color;
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);

    .tips {
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color1;
        margin-bottom: 119rpx;
    }

    .btn {
        display: flex;

        .Button1 {
            .kuangao(220rpx, 88rpx);
            .lineheight(80rpx);
            .borders(1rpx, @text-color4);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            background-color: @white-color;
            margin-right: 30rpx;
        }

        .word1 {
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }

        .Button2 {
            .kuangao(220rpx, 88rpx);
            .lineheight(80rpx);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            background: linear-gradient(105deg, #2B99FF, #1B8CF5);
            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        }

        .word2 {
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }
}

//wxss  设置z-index是为了让遮罩挡住页面其他内容的同时不会挡住我们操纵弹窗
.mask {
    .kuangao(100%, 100vh);
    background-color: rgba(56, 55, 55, 0.651);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
}

.windows {
    .kuangao(590rpx, 400rpx);
    .flexs();
    background-color: @white-color;
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    position: fixed;
    left: 11%;
    top: 35%;
    z-index: 999;

    .tips {
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color1;
        margin-bottom: 119rpx;
    }

    .btn {
        display: flex;

        .Button1 {
            .kuangao(220rpx, 88rpx);
            .lineheight(80rpx);
            .borders(1rpx, @text-color4);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            background-color: @white-color;
            margin-right: 30rpx;
        }

        .word1 {
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }

        .Button2 {
            .kuangao(220rpx, 88rpx);
            .lineheight(80rpx);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            background: linear-gradient(105deg, #2B99FF, #1B8CF5);
            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        }

        .word2 {
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }
}
